<template>
  <div class="project_list_carousel">
    <div class="scroll-container">
      <ul>
        <li>
          <div>
            <img src="/images/insta360.png">
            <div >
              <p>
                Shadowstone Insta360 Innovation is the world's leading
                <br>panoramic camera brand, and the Shadowstone Insta360 
                <br>product line covers professional VR panoramic cameras,
                <br> action cameras and consumer panoramic cameras.
                <br> For more information about panoramic action cameras,
                <br> check out Shadowstone Insta360.
              </p>
            </div>
            <div class="submit-container">
              <el-button  size="large" style="width: 150px;">
                <a href="https://insta360.starbucket.xyz/">GO</a>
              </el-button>
            </div>
          </div>
        </li>
        <li>
          <div>
            <img src="/images/obsbot.png">
            <div >
              <p>
                Founded in April 2016, OBSBOT, an artificial intelligence camera
                <br> brand, is dedicated to connecting people and the imaging industry
                <br> to the future.With the artificial intelligence as the core, OBSBOT
                <br> focuses on the application research of new technologies in the field
                <br> of videography. It hopes to use revolutionary technology and innovative
                <br> products to innovate the way of public records and image creation, and
                <br> to change people's social way.
              </p>
            </div>
            <div class="submit-container">
              <el-button  size="large" style="width: 150px; background: none;">
                <a href="https://starbucket.xyz/">GO</a>
              </el-button>
            </div>
          </div>
        </li>
        <li>
          <div>
            <img src="/images/travel.png">
            <div >
              <p>
                Shadowstone Insta360 Innovation is the world's leading
                <br>panoramic camera brand, and the Shadowstone Insta360 
                <br>product line covers professional VR panoramic cameras,
                <br> action cameras and consumer panoramic cameras.
                <br> For more information about panoramic action cameras,
                <br> check out Shadowstone Insta360.
              </p>
            </div>
            <div class="submit-container">
              <el-button  size="large" style="width: 150px;">
                <a href="http://8.137.150.77:3301">GO</a>
              </el-button>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>


<script lang="ts">
import { gsap } from 'gsap'
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger)

export default defineComponent ({
  async setup(){
    
    const scrollContainer = async() => {
      const scrollProjectList = document.querySelector('.carousel')
      ScrollTrigger.create({
        trigger: scrollProjectList,
        pin: true,
        start: "top top",
        end: "+=1000",
        scrub: 1, 
        onUpdate: (self) => {
          if(scrollProjectList){
            document.querySelectorAll('.scroll-container li').forEach
            (item => {
              gsap.to(item, {
                x: -(self.progress * 2800),
                ease: "power2.out",
              })
            })
          }
        },
      })
    }


    onMounted(() => {
      scrollContainer()
    })



  }
})

</script>

<style scoped>

a {
  color: rgb(0, 0, 0);
}

.project_list_carousel {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: scroll; /* 启用水平滚动 */
}


.project_list_carousel ul {
  width: 1000px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space:nowrap;  /* ul中的内容不换行 */
  margin-left: 20rem;
  border-radius: 20px;
}

.project_list_carousel ul li {
  display: inline-block;
  width: 600px;
  height: 400px;
  border: 1px solid #ffffff;
  border-radius: 20px;
  overflow: hidden;
  text-align: center;
}

.project_list_carousel ul li:not(last-child){
  margin-right: 500px;
}

/* .scroll-container div {
  display: flex;
  justify-content: space-evenly;
  align-items: center;

} */

.scroll-container img {
  height: 200px;
  width: 300px;
  margin-top: 5px;
}

.scroll-container p {
  font-size: 13px;
}




.scroll-container ul::-webkit-scrollbar {
  display: none;
}

.project_list_carousel::-webkit-scrollbar {
  display: none;
}

</style>